<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" 
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>营养仪表盘 - 智能营养管理系统</title>
</head>
<body>
    <div layout:fragment="content">
        <!-- 页面标题 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2><i class="fas fa-tachometer-alt me-2"></i>营养仪表盘</h2>
            <div class="d-flex align-items-center">
                <input type="date" class="form-control me-2" id="dateSelector" 
                       th:value="${targetDate}" onchange="changeDate()">
                <span class="badge bg-primary" th:if="${isToday}">今日</span>
                <span class="badge bg-secondary" th:unless="${isToday}">历史</span>
            </div>
        </div>

        <!-- 营养预警 -->
        <div th:if="${alert.hasAlerts()}" class="row mb-4">
            <div class="col-12">
                <div class="card border-warning">
                    <div class="card-header bg-warning text-dark">
                        <h5 class="mb-0"><i class="fas fa-exclamation-triangle me-2"></i>营养预警</h5>
                    </div>
                    <div class="card-body">
                        <!-- 高优先级预警 -->
                        <div th:if="${!alert.highPriorityAlerts.empty}">
                            <div th:each="alertItem : ${alert.highPriorityAlerts}" 
                                 class="alert alert-danger d-flex align-items-center mb-2">
                                <i th:class="${alertItem.levelIcon} + ' me-2'"></i>
                                <span th:text="${alertItem.message}"></span>
                            </div>
                        </div>
                        
                        <!-- 中优先级预警 -->
                        <div th:if="${!alert.mediumPriorityAlerts.empty}">
                            <div th:each="alertItem : ${alert.mediumPriorityAlerts}" 
                                 class="alert alert-warning d-flex align-items-center mb-2">
                                <i th:class="${alertItem.levelIcon} + ' me-2'"></i>
                                <span th:text="${alertItem.message}"></span>
                            </div>
                        </div>
                        
                        <!-- 低优先级预警 -->
                        <div th:if="${!alert.lowPriorityAlerts.empty}">
                            <div th:each="alertItem : ${alert.lowPriorityAlerts}" 
                                 class="alert alert-info d-flex align-items-center mb-2">
                                <i th:class="${alertItem.levelIcon} + ' me-2'"></i>
                                <span th:text="${alertItem.message}"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 营养进度卡片 -->
        <div class="row mb-4">
            <!-- 卡路里 -->
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card h-100">
                    <div class="card-body text-center">
                        <div class="nutrition-icon mb-3">
                            <i class="fas fa-fire text-danger" style="font-size: 2.5rem;"></i>
                        </div>
                        <h5 class="card-title">卡路里</h5>
                        <div class="progress mb-2" style="height: 10px;">
                            <div class="progress-bar" 
                                 th:class="${progress.getProgressBarClass(progress.caloriesProgress)}"
                                 th:style="'width: ' + ${#numbers.formatDecimal(progress.caloriesProgress, 1, 1)} + '%'">
                            </div>
                        </div>
                        <p class="mb-1">
                            <strong th:text="${#numbers.formatDecimal(progress.caloriesActual, 0, 0)}">0</strong> / 
                            <span th:text="${#numbers.formatDecimal(progress.caloriesGoal, 0, 0)}">0</span> kcal
                        </p>
                        <small class="text-muted" th:text="${progress.caloriesProgress} + '%'">0%</small>
                        <p class="mt-2 mb-0">
                            <small class="text-muted">
                                剩余: <span th:text="${#numbers.formatDecimal(progress.caloriesRemaining, 0, 0)}">0</span> kcal
                            </small>
                        </p>
                    </div>
                </div>
            </div>

            <!-- 蛋白质 -->
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card h-100">
                    <div class="card-body text-center">
                        <div class="nutrition-icon mb-3">
                            <i class="fas fa-drumstick-bite text-warning" style="font-size: 2.5rem;"></i>
                        </div>
                        <h5 class="card-title">蛋白质</h5>
                        <div class="progress mb-2" style="height: 10px;">
                            <div class="progress-bar" 
                                 th:class="${progress.getProgressBarClass(progress.proteinProgress)}"
                                 th:style="'width: ' + ${#numbers.formatDecimal(progress.proteinProgress, 1, 1)} + '%'">
                            </div>
                        </div>
                        <p class="mb-1">
                            <strong th:text="${#numbers.formatDecimal(progress.proteinActual, 1, 1)}">0</strong> / 
                            <span th:text="${#numbers.formatDecimal(progress.proteinGoal, 1, 1)}">0</span> g
                        </p>
                        <small class="text-muted" th:text="${progress.proteinProgress} + '%'">0%</small>
                        <p class="mt-2 mb-0">
                            <small class="text-muted">
                                剩余: <span th:text="${#numbers.formatDecimal(progress.proteinRemaining, 1, 1)}">0</span> g
                            </small>
                        </p>
                    </div>
                </div>
            </div>

            <!-- 碳水化合物 -->
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card h-100">
                    <div class="card-body text-center">
                        <div class="nutrition-icon mb-3">
                            <i class="fas fa-bread-slice text-info" style="font-size: 2.5rem;"></i>
                        </div>
                        <h5 class="card-title">碳水化合物</h5>
                        <div class="progress mb-2" style="height: 10px;">
                            <div class="progress-bar" 
                                 th:class="${progress.getProgressBarClass(progress.carbsProgress)}"
                                 th:style="'width: ' + ${#numbers.formatDecimal(progress.carbsProgress, 1, 1)} + '%'">
                            </div>
                        </div>
                        <p class="mb-1">
                            <strong th:text="${#numbers.formatDecimal(progress.carbsActual, 1, 1)}">0</strong> / 
                            <span th:text="${#numbers.formatDecimal(progress.carbsGoal, 1, 1)}">0</span> g
                        </p>
                        <small class="text-muted" th:text="${progress.carbsProgress} + '%'">0%</small>
                        <p class="mt-2 mb-0">
                            <small class="text-muted">
                                剩余: <span th:text="${#numbers.formatDecimal(progress.carbsRemaining, 1, 1)}">0</span> g
                            </small>
                        </p>
                    </div>
                </div>
            </div>

            <!-- 脂肪 -->
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card h-100">
                    <div class="card-body text-center">
                        <div class="nutrition-icon mb-3">
                            <i class="fas fa-tint text-success" style="font-size: 2.5rem;"></i>
                        </div>
                        <h5 class="card-title">脂肪</h5>
                        <div class="progress mb-2" style="height: 10px;">
                            <div class="progress-bar" 
                                 th:class="${progress.getProgressBarClass(progress.fatProgress)}"
                                 th:style="'width: ' + ${#numbers.formatDecimal(progress.fatProgress, 1, 1)} + '%'">
                            </div>
                        </div>
                        <p class="mb-1">
                            <strong th:text="${#numbers.formatDecimal(progress.fatActual, 1, 1)}">0</strong> / 
                            <span th:text="${#numbers.formatDecimal(progress.fatGoal, 1, 1)}">0</span> g
                        </p>
                        <small class="text-muted" th:text="${progress.fatProgress} + '%'">0%</small>
                        <p class="mt-2 mb-0">
                            <small class="text-muted">
                                剩余: <span th:text="${#numbers.formatDecimal(progress.fatRemaining, 1, 1)}">0</span> g
                            </small>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- 今日点餐记录 -->
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="fas fa-utensils me-2"></i>
                            <span th:if="${isToday}">今日点餐记录</span>
                            <span th:unless="${isToday}" th:text="'点餐记录 (' + ${#temporals.format(targetDate, 'MM-dd')} + ')'">点餐记录</span>
                        </h5>
                        <a th:href="@{/meals}" class="btn btn-primary btn-sm" th:if="${isToday}">
                            <i class="fas fa-plus me-1"></i>去点餐
                        </a>
                    </div>
                    <div class="card-body">
                        <div th:if="${todayOrders.empty}" class="text-center py-4">
                            <i class="fas fa-utensils text-muted" style="font-size: 3rem;"></i>
                            <p class="text-muted mt-3 mb-0">
                                <span th:if="${isToday}">今日还没有点餐记录</span>
                                <span th:unless="${isToday}">该日期没有点餐记录</span>
                            </p>
                        </div>
                        
                        <div th:unless="${todayOrders.empty}">
                            <!-- 按餐别分组显示 -->
                            <div class="row">
                                <!-- 早餐 -->
                                <div class="col-md-4 mb-3" th:with="breakfastOrders=${todayOrders.?[mealType.name() == 'BREAKFAST']}">
                                    <h6 class="text-muted mb-2"><i class="fas fa-sun me-1"></i>早餐</h6>
                                    <div th:if="${breakfastOrders.empty}" class="text-muted small">未点餐</div>
                                    <div th:each="order : ${breakfastOrders}" class="border rounded p-2 mb-2">
                                        <div class="d-flex justify-content-between align-items-start">
                                            <div>
                                                <strong th:text="${order.dish.name}">菜品名称</strong>
                                                <div class="small text-muted">
                                                    份量: <span th:text="${order.portionSize}">1.0</span>
                                                </div>
                                                <div class="small text-muted">
                                                    <span th:text="${#numbers.formatDecimal(order.actualCalories, 0, 0)}">0</span> kcal
                                                </div>
                                            </div>
                                            <button class="btn btn-sm btn-outline-danger" 
                                                    th:if="${isToday}"
                                                    onclick="deleteOrder(this)"
                                                    th:data-order-id="${order.id}">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 午餐 -->
                                <div class="col-md-4 mb-3" th:with="lunchOrders=${todayOrders.?[mealType.name() == 'LUNCH']}">
                                    <h6 class="text-muted mb-2"><i class="fas fa-sun me-1"></i>午餐</h6>
                                    <div th:if="${lunchOrders.empty}" class="text-muted small">未点餐</div>
                                    <div th:each="order : ${lunchOrders}" class="border rounded p-2 mb-2">
                                        <div class="d-flex justify-content-between align-items-start">
                                            <div>
                                                <strong th:text="${order.dish.name}">菜品名称</strong>
                                                <div class="small text-muted">
                                                    份量: <span th:text="${order.portionSize}">1.0</span>
                                                </div>
                                                <div class="small text-muted">
                                                    <span th:text="${#numbers.formatDecimal(order.actualCalories, 0, 0)}">0</span> kcal
                                                </div>
                                            </div>
                                            <button class="btn btn-sm btn-outline-danger" 
                                                    th:if="${isToday}"
                                                    onclick="deleteOrder(this)"
                                                    th:data-order-id="${order.id}">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 晚餐 -->
                                <div class="col-md-4 mb-3" th:with="dinnerOrders=${todayOrders.?[mealType.name() == 'DINNER']}">
                                    <h6 class="text-muted mb-2"><i class="fas fa-moon me-1"></i>晚餐</h6>
                                    <div th:if="${dinnerOrders.empty}" class="text-muted small">未点餐</div>
                                    <div th:each="order : ${dinnerOrders}" class="border rounded p-2 mb-2">
                                        <div class="d-flex justify-content-between align-items-start">
                                            <div>
                                                <strong th:text="${order.dish.name}">菜品名称</strong>
                                                <div class="small text-muted">
                                                    份量: <span th:text="${order.portionSize}">1.0</span>
                                                </div>
                                                <div class="small text-muted">
                                                    <span th:text="${#numbers.formatDecimal(order.actualCalories, 0, 0)}">0</span> kcal
                                                </div>
                                            </div>
                                            <button class="btn btn-sm btn-outline-danger" 
                                                    th:if="${isToday}"
                                                    onclick="deleteOrder(this)"
                                                    th:data-order-id="${order.id}">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 营养趋势图 -->
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-chart-line me-2"></i>7天营养趋势</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="nutritionTrendChart" height="200"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <th:block layout:fragment="page-scripts">
        <script>
            // 日期选择器变化事件
            function changeDate() {
                const selectedDate = document.getElementById('dateSelector').value;
                window.location.href = '/nutrition/dashboard?date=' + selectedDate;
            }
            
            // 删除点餐记录
            function deleteOrder(button) {
                const orderId = button.getAttribute('data-order-id');
                
                if (confirm('确定要删除这条点餐记录吗？')) {
                    fetch('/nutrition/order/' + orderId, {
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json',
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            App.showMessage('success', data.message);
                            // 刷新页面
                            setTimeout(() => {
                                window.location.reload();
                            }, 1000);
                        } else {
                            App.showMessage('error', data.message);
                        }
                    })
                    .catch(error => {
                        App.showMessage('error', '删除失败，请稍后重试');
                        console.error('Error:', error);
                    });
                }
            }
            
            // 绘制营养趋势图
            function drawNutritionTrendChart() {
                const ctx = document.getElementById('nutritionTrendChart').getContext('2d');
                
                // 获取趋势数据
                const trendData = /*[[${nutritionTrend}]]*/ [];
                
                const labels = trendData.map(item => {
                    const date = new Date(item.summaryDate);
                    return (date.getMonth() + 1) + '/' + date.getDate();
                });
                
                const caloriesData = trendData.map(item => item.totalCalories || 0);
                
                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: '卡路里',
                            data: caloriesData,
                            borderColor: '#dc3545',
                            backgroundColor: 'rgba(220, 53, 69, 0.1)',
                            tension: 0.4,
                            fill: true
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true,
                                title: {
                                    display: true,
                                    text: 'kcal'
                                }
                            }
                        },
                        plugins: {
                            legend: {
                                display: false
                            }
                        }
                    }
                });
            }
            
            // 页面加载完成后绘制图表
            document.addEventListener('DOMContentLoaded', function() {
                drawNutritionTrendChart();
            });
        </script>
    </th:block>
</body>
</html>
